<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>
    <a href="#/a">a页面</a>
    <a href="#/b">b页面</a>
    <a href="#/c">c页面</a>
    <a href="#/d">d页面</a>
    <div id="router-view"></div>
  </div>
</body>
<script>
  const dom = document.getElementById('router-view')
  // 监听hash值的变化
  // 通过hash值的不同，模拟了不同的路由
  window.addEventListener('hashchange', function () {
    console.log(location.hash.slice(1))
    render(location.hash.slice(1))
  })
  render('/a')
  function render (urlHash) {
    switch (urlHash) {
      case '/a':
        dom.innerHTML = '这里是a页面'
        break;
      case '/b':
        dom.innerHTML = '这里是b页面'
        break;
      case '/c':
        dom.innerHTML = '这里是c页面'
        break;
      case '/d':
        dom.innerHTML = '这里是d页面'
        break;
    
      default:
        dom.innerHTML = '这里是404页面'
        break;
    }
  }
</script>
</html>